<div class="row" style="max-width: 650px;">
  <div class="col-sm-4 col-sm-push-8 browse-deployment-donut">
    <deployment-donut
        rc="deployment"
        deployment-config="deploymentConfig"
        pods="podsForDeployment"
        hpa="autoscalers"
        scalable="isScalable()"
        alerts="alerts">
    </deployment-donut>
  </div>
  <div class="col-sm-8 col-sm-pull-4">
    <dl class="dl-horizontal left">
      <dt ng-if-start="deployment | isDeployment">Status:</dt>
      <dd ng-if-end>
        <status-icon status="deployment | deploymentStatus"></status-icon>
        {{deployment | deploymentStatus}}
        <span style="margin-left: 7px;">
          <button ng-show="!rollBackCollapsed && (deployment | deploymentStatus) == 'Complete' && !(deployment | deploymentIsLatest : deploymentConfig) && !deployment.metadata.deletionTimestamp && ('deploymentconfigrollbacks' | canI : 'create')" ng-disabled="(deploymentConfigDeploymentsInProgress[deploymentConfigName] | hashSize) > 0" type="button" class="btn btn-default btn-xs" ng-click="rollBackCollapsed = !rollBackCollapsed">Roll Back</button>
          <div ng-show="rollBackCollapsed" class="well well-sm">
            Use the following settings from {{deployment.metadata.name}} when rolling back:
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="changeScaleSettings" ng-disabled="(deploymentConfigDeploymentsInProgress[deploymentConfigName] | hashSize) > 0"> replica count and selector
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="changeStrategy" ng-disabled="(deploymentConfigDeploymentsInProgress[deploymentConfigName] | hashSize) > 0"> deployment strategy
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="changeTriggers" ng-disabled="(deploymentConfigDeploymentsInProgress[deploymentConfigName] | hashSize) > 0"> deployment trigger
              </label>
            </div>
            <button type="button" ng-click="rollbackToDeployment(deployment, changeScaleSettings, changeStrategy, changeTriggers)" ng-disabled="(deploymentConfigDeploymentsInProgress[deploymentConfigName] | hashSize) > 0" class="btn btn-default btn-xs">Roll Back</button>
          </div>
          <!-- disabled until we have an api endpoint for retry
          <button ng-show="(deployment | deploymentStatus) == 'Failed'" type="button" ng-click="retryFailedDeployment(deployment)" ng-disabled="(deploymentConfigDeploymentsInProgress[deploymentConfigName] | hashSize) > 0" class="btn btn-default btn-xs" ng-if="(deployment | deploymentIsLatest : deploymentConfig) && !deployment.metadata.deletionTimestamp">Retry</button>
          -->
          <button ng-show="(deployment | deploymentIsInProgress) && !deployment.metadata.deletionTimestamp && ('replicationcontrollers' | canI : 'update')" type="button" ng-click="cancelRunningDeployment(deployment)" class="btn btn-default btn-xs">Cancel</button>
        </span>
      </dd>
      <dt ng-if-start="deployment | isDeployment">Deployment config:</dt>
      <dd ng-if-end>
        <a ng-href="{{deploymentConfigName | navigateResourceURL : 'DeploymentConfig' : deployment.metadata.namespace}}">{{deploymentConfigName}}</a>
      </dd>
      <dt ng-if-start="deployment | annotation:'deploymentStatusReason'">Status reason:</dt>
      <dd ng-if-end>
        {{deployment | annotation:'deploymentStatusReason'}}
      </dd>
      <dt ng-if-start="deployment | deploymentIsInProgress">Duration:</dt>
      <dd ng-if-end>
        <span ng-switch="deployment | deploymentStatus" class="hide-ng-leave">
          <span ng-switch-when="Running">running for <duration-until-now timestamp="deployment.metadata.creationTimestamp"></duration-until-now></span>
          <span ng-switch-default>waiting for <duration-until-now timestamp="deployment.metadata.creationTimestamp"></duration-until-now></span>
        </span>
      </dd>
      <dt>Selectors:</dt>
      <dd>
        <span ng-if="!deployment.spec.selector">none</span>
        <span ng-repeat="(labelKey, labelValue) in deployment.spec.selector" class="word-break">{{labelKey}}={{labelValue}}<span ng-show="!$last">, </span></span>
      </dd>
      <dt>Replicas:</dt>
      <dd>
        <!-- Enable scaling if this is a plain replication controller or it's the active deployment,
             as long as it doesn't have an HPA. -->
        <replicas status="deployment.status.replicas"
                  spec="deployment.spec.replicas"
                  disable-scaling="!isScalable()"
                  scale-fn="scale(replicas)"
                  deployment="deployment">
        </replicas>
        <span ng-if="autoscalers.length">(autoscaled)</span>
      </dd>
    </dl>
  </div>
</div>
<div class="row">
  <div class="col-lg-6">
    <div class="deployment-detail">
      <h3>Template</h3>
      <pod-template
        pod-template="deployment.spec.template"
        images-by-docker-reference="imagesByDockerReference"
        builds="builds"
        detailed="true"
        add-health-check-url="{{((!deploymentConfig || isActive) && ('deploymentconfigs' | canI : 'update')) ? healthCheckURL : ''}}">
      </pod-template>
      <h4>Volumes</h4>
      <p ng-if="!deployment.spec.template.spec.volumes.length">
        <a ng-if="'replicationcontrollers' | canI : 'update'" ng-href="project/{{project.metadata.name}}/attach-pvc?deployment={{deployment.metadata.name}}">Attach storage</a>
        <span ng-if="!('replicationcontrollers' | canI : 'update')">none</span>
      </p>
      <volumes volumes="deployment.spec.template.spec.volumes" namespace="project.metadata.name"></volumes>
    </div>
  </div>
</div>

<!-- Autoscaling -->
<div ng-if="!deploymentConfigName || autoscalers.length">
  <h3>Autoscaling</h3>

  <!-- Show any warnings. -->
  <div ng-repeat="warning in hpaWarnings" class="alert alert-warning">
    <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
    <span class="sr-only">Warning:</span>
    {{warning.message}}

    <!-- If the CPU request is missing, add an action to set one. -->
    <span ng-if="warning.reason === 'NoCPURequest'">
      <!-- Prompt to set CPU request on the DC if this is a deployment. -->
      <a ng-href="project/{{projectName}}/set-limits?dcName={{deploymentConfigName}}"
         ng-if="deploymentConfigName && !deploymentConfigMissing && ('deploymentconfigs' | canI : 'update')"
         role="button">Set resource
        <span ng-if="!('cpu' | isRequestCalculated : project)">requests and</span> limits</a>
      <!-- Prompt to set CPU request on the RC if not a deployment. -->
      <a ng-href="project/{{projectName}}/set-limits?rcName={{deployment.metadata.name}}"
         ng-if="!deploymentConfigName && ('replicationcontrollers' | canI : 'update')"
         role="button">Set resource
        <span ng-if="!('cpu' | isRequestCalculated : project)">requests and</span> limits</a>
    </span>
  </div>

  <!-- Create autoscaler -->
  <div ng-if="!autoscalers.length">
    <a ng-href="project/{{projectName}}/edit/autoscaler?kind=ReplicationController&name={{deployment.metadata.name}}"
       role="button">Add autoscaler</a>
  </div>

  <!-- HPA details -->
  <div ng-repeat="hpa in autoscalers | orderBy : 'name'">
    <h4>{{hpa.metadata.name}}</h4>
    <hpa hpa="hpa"
         show-scale-target="hpa.spec.scaleRef.kind !== 'ReplicationController'"
         alerts="alerts">
    </hpa>
  </div>
</div>

<h3>Pods</h3>
<pods-table pods="podsForDeployment"></pods-table>

<annotations annotations="deployment.metadata.annotations"></annotations>
